<template>
  <div class="footcom">
    <ul>
      <router-link to="/" tag="li">
        <span class="iconfont icon-shouye"></span>
        <p>推荐</p>
      </router-link>

      <router-link to="/update" tag="li">
        <span class="iconfont icon-xiexiangbao"></span>
        <p>更新</p>
      </router-link>

      <router-link to="/bookrack" tag="li">
        <span class="iconfont icon-jiarushujia_01"></span>
        <p>书架</p>
      </router-link>

      <router-link to="/my" tag="li" @click="color">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      property: "value",
    };
  },
  methods: {
    color() {
      // console.log(111);
    },
  },
};
</script>

<style lang="scss" scoped>
.footcom {
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  ul {
    display: flex;
    justify-content: space-around;
    background-color: #fafafa;
    li {
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
        color: #666;
      span {
        font-size: 22px;
        // color: #666;
      }
      p {
        font-size: 10px;
        // color: #666;
        margin-top: 5px;
      }
    }
    .router-link-exact-active {
      color: #fc5253;
    }
  }
}
</style>